import React, {Component} from 'react';
import {Button, WhiteSpace, WingBlank, NavBar, InputItem, Toast} from "antd-mobile";
import {v4 as uuidv4} from 'uuid'
import {CloseOutlined} from '@ant-design/icons'
import "./Login.scss"
import http from "../util/http";
import cookie from'react-cookies'

class Login extends Component {
    constructor(props) {
        super(props);
        cookie.remove('token')
        cookie.remove('vipId')
        this.state = {
            type: 'money',
            hasError: false,
            hasErrorCode: false,
            value: '',
            code: '',
            uuid: '',
            buttonstate: false,
            buttontext: 59,
            disabled: false,
            userInfo: {
                mobile: '',
                uuid: ''
            }
        }
    }

    onErrorClick = () => {
        if (this.state.hasError) {
            Toast.info('请输入11位手机号');
        }
    }
    onErrorClickCode = () => {
        if (this.state.hasErrorCode) {
            Toast.info('请输入4位短信验证码');
        }
    }
    onChange = (value) => {
        const realValue = value.replace(/-/g, '')
        let test1 = '';
        let test2 = '';
        let test3 = '';
        if (realValue.length < 12) {
            if (realValue.length > 3) {
                test1 = realValue.substring(0, 3);
                test2 = realValue.substring(3, 7);
                value = test1 + '-' + test2
                if (realValue.length > 7) {
                    test3 = realValue.substring(7, 12);
                    value += '-' + test3
                }
            }
            this.setState({
                hasError: true,
                value,
            });
        }
        if (realValue.length === 11) {
            this.setState({
                hasError: false,
            });
        }
    }
    onChangeCode = (value) => {
        this.setState({
            hasErrorCode: true,
            code: value
        });
    }

    getCaptcha = () => {
        const mobile = this.state.value.replace(/-/g, '')
        const pattern = /^1[34578]\d{9}$/;
        if (!pattern.test(mobile)) {
            alert('请输入11位正确的手机号')
        } else {
            const uuid = uuidv4();
            const userInfo = {
                uuid: uuid,
                mobile: mobile
            }
            this.setState({
                uuid,
                disabled: true,
                buttonstate: true,
                userInfo: {
                    ...userInfo
                }
            })


            console.log(this.state.userInfo)

            http.get(`/api/send/${uuid}`, {mobile}).then(({data}) => {
                if (data.code === 200) {

                } else {
                    alert(data.msg)
                }
            })


            for (let i = 1; i < 59; i++) {
                let text = 59 - i;
                setTimeout(() => {
                    this.setState({
                        buttontext: text
                    })
                }, 1000 * i);
            }
            setTimeout(() => {
                this.setState({
                    disabled: false,
                    buttonstate: false,
                    buttontext: 59
                })
            }, 1000 * 60);
        }
    }
    Login = () => {
        const mobile = this.state.value.replace(/-/g, '')
        const pattern = /^1[34578]\d{9}$/;
        const loginInfo = {
            code: this.state.code,
            phone: mobile,
            uuid: this.state.uuid
        };
        if (pattern.test(mobile)) {
            if (loginInfo.code.length===4){
                http.post('/api/login',loginInfo).then(({data})=>{
                    if (data.code===200){
                        console.log(data)
                        alert(data.data.info);
                        setTimeout(() => {
                            this.props.history.push("/home")
                        }, 1000);
                        const date=new Date();
                        date.setDate(date.getDate()+7)

                        // const date2=new Date(new Date().getTime()+7*24*3600*1000)
                        cookie.save('vipToken',data.data.token,{expires:date})
                        cookie.save('vipId',data.data.vip.vipId,{expires:date})
                    }else {
                        alert(data.msg)
                    }
                })
            }else {
                alert('请输入验证码')
            }
        }else {
            alert('请输入正确的11位手机号')
        }
    }

    render() {
        return (
            <div className={"login"}>
                <WingBlank>
                    <NavBar
                        className={"header"}
                        mode="light"
                        icon={<CloseOutlined style={{fontSize: '18px', color: '#000000'}}/>}
                        onLeftClick={() => this.props.history.goBack()}
                    ><strong>手机验证</strong></NavBar>
                    <div className={"body"}>
                        <h3>请输入您的手机号，登录或注册您的账号</h3>
                        <div className={"input-item"}>
                            <InputItem
                                type={"money"}
                                placeholder="请输入您的手机号"
                                clear
                                className={"middle"}
                                error={this.state.hasError}
                                onChange={this.onChange}
                                onErrorClick={this.onErrorClick}
                                value={this.state.value}
                                moneyKeyboardAlign="left"
                            >手机号码</InputItem>
                        </div>
                        <div className={"captcha-item"}>
                            <InputItem
                                type={"money"}
                                className={"middle"}
                                placeholder="请输入验证码"
                                clear
                                error={this.state.hasError}
                                onChange={this.onChangeCode}
                                onErrorClick={this.onErrorClickCode}
                                value={this.state.code}
                                moneyKeyboardAlign="left"
                            >验证码</InputItem>
                            <Button disabled={this.state.disabled} type="warning"
                                    onClick={this.getCaptcha.bind(this)}>{this.state.buttonstate ? `${this.state.buttontext}秒后重新发送` : "获取验证码"}</Button>
                        </div>
                        <Button type="warning" style={{margin: '20px 10px', borderRadius: '0px'}}
                                onClick={this.Login}>登录</Button><WhiteSpace/>
                    </div>
                </WingBlank>
            </div>
        );
    }
}

export default Login;
